<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Index 首页</title>
    </head>
    <!-- <script src="../dist/main.js"></script> -->
    <script src="./vue.js"></script>
    <body>
        <!-- 添加新名称 -->
        <div id="app">
            <div>
                <input v-model="uname"/>
                <button @click="add">添加</button>
            </div>
            <li v-for="item in list":key="item.id"><input type="checkbox"/>编号:{{item.id}}--姓名{{item.name}}</li>
        </div>
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    uname: '',
                    list:[
                        {id:0, name:'A'},
                        {id:1, name:'B'},
                        {id:2, name:'C'}
                    ]
                },
                methods: {
                    add(){
                        var newuser = {id:this.list.length, name:this.uname}
                        //this.list.push(newuser)
                        //从头开始创建不加key就会出现问题，需要保存状态的情况下要家：key，否则会造成状态紊乱
                        //无论在什么情况下v-for 或者react的map，需要加key
                        this.list.unshift(newuser)
                    }
                }
            })
        </script>
    </body>
</html>